<template>
  <div class="panel-tab__content">
    <el-form label-width="90px" @submit.prevent>
      <el-form-item label="业务关联" prop="routeKey">
        <el-select
          v-model="routeKey"
          placeholder="请选择业务关联"
          @change="updateElementFormKey"
          clearable
        >
          <el-option
            v-for="item in process_business_form"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script name="BusinessForm" setup lang="ts">
import { toRefs, nextTick, reactive } from 'vue'
import { process_business_form } from '@/hooks/dict/useProject'
const props = defineProps({
  id: String,
  type: String
})
const prefix = inject('prefix')
const width = inject('width')
const data = reactive({
  routeKey: '',
  localScope: false
})
const { routeKey, localScope } = toRefs(data)
const bpmnELement = ref()
const elExtensionElements = ref()
const otherExtensions = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances

function resetFormList() {
  bpmnELement.value = bpmnInstances().bpmnElement
  routeKey.value = bpmnELement.value.businessObject.routeKey
  // 获取元素扩展属性 或者 创建扩展属性
  elExtensionElements.value =
    bpmnELement.value.businessObject.get('extensionElements') ||
    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
  localScope.value = bpmnELement.value.businessObject.localScope
  // 保留剩余扩展元素，便于后面更新该元素对应属性
  otherExtensions.value = elExtensionElements.value.values.filter(
    ex => ex.$type !== `${prefix}:FormData`
  )
}
function updateElementFormKey() {
  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
    routeKey: routeKey.value
  })
}

watch(
  () => props.id,
  val => {
    val &&
      val.length &&
      nextTick(() => {
        resetFormList()
      })
  },
  { immediate: true }
)
</script>
